<template>
  <div class="login-container">
    <div class="login-box">
     
      <el-input
        v-model="ruleForm.name"
        placeholder="账号"
        class="input-area"
        autofocus
      ></el-input>
      <el-input
        v-model="ruleForm.password"
        placeholder="密码"
        type="password"
        class="input-area"
        @keydown.enter="login"
      ></el-input>
      <div class="button">
        <el-button type="primary" @click="login" class="">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive } from "vue";
import { error, saveLogin } from "@/utils/util";
import { useRouter } from "vue-router";
export default {
  name: "Login",
  setup() {
    //引入路由模块
    const router = useRouter();
    const ruleForm = reactive({
      name: "",
      password: "",
    });
    //登录
    const login = () => {
      //验证
      const { name, password } = ruleForm;
      //设置账号密码
      const rightName: string = "yidong";
      const rightPassword: string = "yidong123";
      if (name === rightName && password === rightPassword) {
        //保存登录状态
        saveLogin("true");
        localStorage.setItem("login", "true");
        //跳转路由
        router.push({
          name: "manage",
        });
      } else {
        error("用户名或者密码错误");
      }
    };
    return {
      ruleForm,
      login,
    };
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background: url("@/assets/images/login_bac.jpg");
  position: relative;
  .login-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    width: 50rem;
    height: 22rem;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
    padding: 5rem 2rem 2rem 2rem;
    .input-area {
      margin-bottom: 3rem;
    }
    .button {
      text-align: center;
    }
  }
}
</style>
